
import React, { useEffect, useState } from 'react';
import { Button, Modal, Form, Input, Divider, Table, Space, Tag, notification } from 'antd';
import BloodPressureEcharts from './BloodPressureEcharts';
import type { ColumnsType } from 'antd/es/table';
import { useForm } from 'antd/es/form/Form';
import type { DatePickerProps } from 'antd';
import { DatePicker } from 'antd';
import { useDispatch, useSelector } from 'react-redux';
import moment from 'moment';
import Index from '../../../../../../api/Inedx';

interface Props { }


interface DataType {
    key: number;
    bpId: number;
    bpHighValue: number;
    bpLowValue: number;
    bpTime: number;
    datasorigin: string;
    residentId: number;
}


function BloodPressure(props: Props) {
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [bpId, setbpId] = useState("")
    const [form] = useForm()
    const dispacth = useDispatch()
    const BloodPressureList = useSelector((state: any) => { return state.WTreducer.BloodPressureList })
    const residentId = useSelector((state: any) => { return state.WTreducer.residentId })

    let getBloodPressureList = async () => {//查询用户血压列表
        let res = await Index.Resident.GetBloodPressureList({ residentId: residentId })
        console.log(res);
        if (res.data.code === "200") {
            res.data.data.map((item: any) => {
                item.key = item.bpId
                item.datasorigin = "用户记录"
            })
            dispacth({ type: "SAVE_BLOODPRESSURELIST", payload: res.data.data })
        } else {
            setIsModalOpen(true);
            dispacth({ type: "SAVE_BLOODPRESSURELIST", payload: res.data.data })
        }
    }


    const set = async (row: any) => {
        setIsModalOpen(true);
        form.setFieldValue("value", row.bpLowValue + "/" + row.bpHighValue);
        setbpId(row.bpId)
    }

    const onFinish = async (value: any) => {//修改血压数据
        console.log(value);
        setIsModalOpen(false);
        let bpTime = moment(value.bpTime._d).format("YYYY-MM-DD HH:mm:ss")//处理时间格式
        let arr = (value.value).split("/")//较表单中拿到的数据进行处理
        let bpLowValue = arr[0]//低压
        let bpHighValue = arr[1]//高压
        let res = await Index.Resident.SetBloodPressure({ residentId, bpId, bpTime, bpHighValue, bpLowValue })//发请求
        console.log(res);
        if (res.data.code === "200") {
            getBloodPressureList()//请求成功调获取接口,刷新表格
            setIsModalOpen(false);//关闭对话框
            notification.success({ message: res.data.message })
        } else {
            notification.error({ message: "修改失败!" })
        }
    }

    const deletes = async (bpId: any, residentId: any) => {
        let res = await Index.Resident.DeleteBloodPressure({ residentId, bpId })
        console.log(res);
        if (res.data.code === "200") {
            getBloodPressureList()
            notification.success({ message: res.data.message })
        } else {
            notification.error({ message: "删除失败!" })
        }
    }














    const columns: ColumnsType<DataType> = [
        {
            title: '测量时间',
            dataIndex: 'bpTime',
            key: 'bpTime',
        },
        {
            title: '数值(mmHg)',
            key: 'value',
            render(value, record, index) {
                return (
                    record.bpLowValue + "/" + record.bpHighValue
                )
            },
        },
        {
            title: '评估',
            key: 'test',
            render: (_, record: any) => {
                if (record.bpHighValue >=140||record.bpLowValue>=90) {
                    return (<Tag color="red">高血压</Tag>)
                } else if (record.bpHighValue <=90||record.bpLowValue<=60) {
                    return (<Tag color="gold">低血压</Tag>)
                } else {
                    return (<Tag color="green">正常</Tag>)
                }
            }
        },
        {
            title: '数据来源',
            key: 'datasorigin',
            dataIndex: 'datasorigin',
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <a onClick={() => { set(record) }}>编辑</a>
                    <a onClick={() => { deletes(record.bpId, record.residentId) }}>删除</a>
                </Space>
            ),
        },
    ];

    const data: DataType[] = BloodPressureList

    const handleOk = () => {
        setIsModalOpen(false);
    };

    const handleCancel = () => {
        setIsModalOpen(false);
    };

    let onChange: DatePickerProps['onChange'] = (date, dateString) => {
        console.log(date, dateString);
    };

















    return (
        <div className="card">
            <div className='left'>
                <BloodPressureEcharts></BloodPressureEcharts>
            </div>
            <Divider type='vertical'></Divider>
            <div className='right'>
                <span className='title32'>血压记录</span>
                <Table columns={columns} dataSource={data} scroll={{ y: 400, x: 0 }} />
            </div>
            <Modal title="编辑" open={isModalOpen} onOk={handleOk} onCancel={handleCancel} footer={false}>
                <Form layout="vertical" onFinish={(value) => { onFinish(value) }} form={form}>
                    <Form.Item
                        label="测量时间"
                        name="bpTime"
                        rules={[{ required: true, message: '请输入时间' }]}
                    >
                        <DatePicker onChange={onChange} placeholder="请输入日期" />
                    </Form.Item>
                    <Form.Item
                        label="数值"
                        name="value"
                        rules={[{ required: true, message: '请输入数值' }]}
                    >
                        <Input placeholder="请输入" />
                    </Form.Item>
                    <Form.Item>
                        <Button type='primary' htmlType='submit'>保存</Button>
                    </Form.Item>
                </Form>
            </Modal>
        </div>
    );
}

export default BloodPressure;